@import 'layout.css';
@import url(font-awesome/css/font-awesome.min.css);

body{padding: 0; margin: 0; position:relative;}
*{font-family:"Microsoft JhengHei","sans-serif"; }
a{text-decoration: none;}
img{max-width: 100%; height: auto;}
.editor a {word-wrap: break-word;word-break: break-all;}
header{box-shadow: 0 0 5px #999;}
#content ,#path{padding: 0px calc((100% - 1000px) / 2);}
#content {min-height:100vh;}
#path{padding:70px 0 10px 0; text-align: left; background-image: url(../images/solgan.png); background-size: auto 100%; background-position: right bottom; background-repeat: no-repeat;}
aside{
	display:inline-block; 
	width: 200px;
background: -moz-linear-gradient(left,  rgba(107,173,255,0.3) 11%, rgba(125,185,232,0) 44%);
background: -webkit-linear-gradient(left,  rgba(107,173,255,0.3) 11%,rgba(125,185,232,0) 44%);
background: linear-gradient(to right,  rgba(107,173,255,0.3) 11%,rgba(125,185,232,0) 44%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d6badff', endColorstr='#007db9e8',GradientType=1 );

}
.Left_Box{background-color: #fff; border:0.5px solid #eee; padding:15px 0px 25px 20px; margin: 40px auto; margin-left: 1px;}
.Left_Box ol{padding:0 0 0 15px;}
.Left_Box ol a{ font-size: 14px; font-weight:none; color: #999;}
aside a{font-size: 16px;}
aside i{padding-left: 15px;}
aside ul li {border-bottom: 0.5px #eee solid; position: relative; padding: 8px 0 8px 15px; font-weight: bold;}
aside ul li a{color:#000;}
aside ul li a:hover {color: #ee3124; }
.current{ color:#ee3124;}
.Left_Box a.current {color:#ee3124;}
.current:before{ position: absolute; left: 0px; top: 0; height: 100%; width:5px;content: ''; background-color: #ee3124; cursor: default;}
.Left_bottom{
background: -moz-linear-gradient(top,  rgba(125,185,232,0) 27%, rgba(255,255,255,1) 79%);
background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 27%,rgba(255,255,255,1) 79%);
background: linear-gradient(to bottom,  rgba(125,185,232,0) 27%,rgba(255,255,255,1) 79%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#ffffff',GradientType=0 );

}
aside ul li:last-child{border: none;}
aside h2{text-align: left; padding: 15px 0; font-weight: bolder;}
aside h2{color: #ee3124; font-size: 20px;}
.editor ul li {font-size: 14px; padding: 8px 0;}
#main{width: 980px; background-color: #fff; border: 1px solid #999; box-shadow: 0 0 5px #999; border-radius: 5px; margin: 20px 0; padding-bottom: 80px;}
.editor{width: 730px; display: inline-block; padding: 50px 20px 80px; vertical-align: top; font-size: 14px; margin-bottom:15px; letter-spacing: 1px; line-height: 28px;}
.Content_Title_01 ,.Content_Title_02{letter-spacing: 1px; font-weight: bold; padding: 20px 0; display: block;}
.Content_Title_01{font-size: 25px;} 
.Content_Title_02{font-size: 18px;}
.editor ul li i{padding: 0 5px; color: #ee3124; font-size: 10px;}
.editor p{margin: 30px 0;}
.history{width: 80%; display: inline-block;}
.img_01{width: 17%; display: inline-block; vertical-align: top;}
.img_02{width: calc(50% - 53px); display: inline-block; margin: 25px;}
.link_moreBox{margin: 10px auto;}
.link_moreBox li{display: inline-block;}
.link_moreBox .link_more{border: none; border-bottom: 1px #666 solid;}
.link_moreBoxOpen{display: none; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.link_more{position: relative; color: #fff; border: 0.5px solid #999; width:calc((100% - 93px) / 3); margin: 25px 13px; padding: 13px 0; text-align: center; display: inline-block;background-color: #ee3124 ;}
.link_more:hover{background-color:#002842; }
.link_more:hover:before{animation: linkmorehover 0.5s; animation-fill-mode:forwards; position: absolute; border: 0.5px #2b4c4b solid; content: ''; height: calc(100% - 10px); margin:10px; left: -6px; top: -6px;}
@keyframes linkmorehover {from {width:0} to {width:  calc(100% - 10px);}}
.other li{display: inline-block; width: calc(50% - 3px);}
.Left_bottom  i.fa{font-size: 25px; width: 30px; color: #05619e;}
.Left_bottom  a ,.products .link_more{
	padding: 8px 0;
	cursor: pointer;
	margin:0 15px 20px 0;
	width:calc(100% - 60px); 
	display: inline-block;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
}
.Left_bottom  a ,.products .link_more ,.products_spanBox a:last-child{
color: #fff;
background: rgb(27,146,228);
background: -moz-linear-gradient(top,  rgba(27,146,228,1) 0%, rgba(23,140,219,1) 22%, rgba(9,113,184,1) 72%, rgba(1,102,170,1) 100%);
background: -webkit-linear-gradient(top,  rgba(27,146,228,1) 0%,rgba(23,140,219,1) 22%,rgba(9,113,184,1) 72%,rgba(1,102,170,1) 100%);
background: linear-gradient(to bottom,  rgba(27,146,228,1) 0%,rgba(23,140,219,1) 22%,rgba(9,113,184,1) 72%,rgba(1,102,170,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b92e4', endColorstr='#0166aa',GradientType=0 );
}
.Left_bottom a:hover ,.products .link_more:hover ,.products_spanBox a:last-child:hover ,.link_moreBoxOpen{
background: rgb(1,102,170);
background: -moz-linear-gradient(top,  rgba(1,102,170,1) 0%, rgba(9,113,184,1) 24%, rgba(23,140,219,1) 77%, rgba(23,140,219,1) 77%, rgba(27,146,228,1) 100%);
background: -webkit-linear-gradient(top,  rgba(1,102,170,1) 0%,rgba(9,113,184,1) 24%,rgba(23,140,219,1) 77%,rgba(23,140,219,1) 77%,rgba(27,146,228,1) 100%);
background: linear-gradient(to bottom,  rgba(1,102,170,1) 0%,rgba(9,113,184,1) 24%,rgba(23,140,219,1) 77%,rgba(23,140,219,1) 77%,rgba(27,146,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0166aa', endColorstr='#1b92e4',GradientType=0 );
}
.products_box{ display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px; }
.products .link_more{margin: 5px 0; width: inherit; padding: 10px;}
.products_box a{ display:inline-block; width: calc((100% - 45px) / 3); margin:0 5px 20px; border: 1px #cfe9ef solid }
.products_list{font-size: 12px; display:inline-block; width: 100%; }
.products_list:hover .products_list_imgBox:before{animation: productslisthover 0.3s; animation-fill-mode:forwards; content: ''; height: 5px; background-color: #ee3124; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
.products_list_imgBox{position: relative; text-align: center; overflow: hidden;}
.products_list:hover .products_list_imgBox img{transform:scale(1.05); transition: 0.5s;}
@keyframes productslisthover {from {width:0;} to {width:100%;}}
.products_list_spanBox{ padding:10px;height: 50px;}
.products_list span{display: block; line-height: 20px;}
.products_list_title{font-weight: bold; font-size: 14px;}
.products_in_img{vertical-align: top; min-height: 200px; width: 35%; display: inline-block; border: 0.5px solid #bbe0e8; text-align: center; margin: 0 10px 0 0;}
.products_spanBox {background-color: #d8f2f7; }
.products_spanBox ,.products_in_page{width: calc(100% - 40px); display: inline-block; vertical-align: top; padding: 15px 20px;}
.products_in_title{font-size: 17px; font-weight: bold; display: block; padding: 15px;}
.products_spanBox a { border: #3fa6bc solid 0.5px;}
.products_spanBox a ,.products_in_page a{width: calc((100% - 10px) / 3); display:inline-block; text-align: center; padding:5px 0; font-size: 16px;}
.products_title:before{content: '產品名稱:';}
.products_in_right{ width:calc(65% - 17px); display: inline-block;}
.products_in_page a:hover ,.products_spanBox a:hover{font-weight: bold;}
.Share{padding:0 0 0 15px;}
.Share img{width: 30px; margin:0 5px}
.Share img:hover{opacity: 0.8;}
.products_in_img .img{    
	display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.products_in_img .img img{width:auto; max-height:200px;}

/* owlCarousel */
.pro_components{ position: relative; }
.pro_components .owl-nav{ margin-top: 0px !important; position: absolute; top: 60%; width: 100%; }
.pro_components .owl-nav [class*=owl-]{ position: absolute; transition: all .2s; background-color: transparent !important; }
.pro_components .owl-nav [class*=owl-]:hover{ background-color: transparent !important; }
.pro_components .owl-nav [class*=owl-]:before{ content: ''; display: inline-block; font: normal normal normal 30px/1 FontAwesome; color: #ee3124; }
.pro_components .owl-nav .disabled{ opacity: 0 !important; }
.pro_components .owl-nav .owl-next{ right: 0px; }
.pro_components .owl-nav .owl-next:before{ content:'\f138'; }
.pro_components .owl-nav .owl-prev{ left: 0px; }
.pro_components .owl-nav .owl-prev:before{ content:'\f137'; }

/*連絡我們*/
.contactus_title{font-size: 20px;font-weight: bold;color: #ee3124;border-bottom: 1px solid;}
.contactus_case ul{display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;}
.contactus_case ul li {width: 45%;}
.contactus_case ul li i{padding: 0 5px;color: #ee3124;font-size: 10px;}
.contactus_case ul li ul{}
.contactus_case ul li ul li{width:50%;}
.contactus_case ul li ul li i{display: none;}

/* sitmep */
#sitemap li{ font-size: 16px !important; }
#sitemap > ul > li > a{ 
	max-width: auto; 
	display: inline-block;
	border-radius: 0px; 
	padding:  8px 10px;
	background: #ee3124;
}
#sitemap #product ul li{ padding: 0px; }
#sitemap #product ul.layer0 li a:first-child {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid #333;
	margin-bottom: 10px;
}
#sitemap #product .sitemap-products{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#sitemap #product .layer1 > li > a:before{ display: none !important; }
#sitemap #product .sitemap-products a{ 
	padding: 8px 10px !important;
	width: calc(100%/3 - 20px);
	margin: 0px !important;
	border: none;
	border: none !important;
}

@media screen and (max-width: 1020px) {
	#content{padding: 0px;}
}

@media screen and (max-width: 999px) {
	aside{position: absolute;}
	#main{margin: 0 20px 20px;}
	#main ,.editor{ width: calc(100% - 40px);}
	.editor{padding: 0 20px;}
	#path{padding: 80px 20px 0px 40px; margin: 0 0 10px 0; background-size:auto 75%;}
	.link_moreBoxOpen{display: block; width: calc(100% - 20px); margin: 0px auto; color: #fff; text-align: right; padding: 5px 10px;}
	.link_moreBox ol{display: none;}
	.link_moreBox li{display: block;}
	.products .link_more{background: #fff; width: 100%; padding: 5px 0px; margin: 0 auto; color: #666;}
	.products .link_more:hover{background: #bbb;}

	#sitemap #product .sitemap-products a{ width: calc(100%/2 - 20px); }
}

@media screen and (max-width: 700px) {
	#products-show-pic{ width: 255px !important; margin: 0 auto; }
	.products_box a{ width:calc(100% - 20px); margin:0 10px 20px;}
	.products_list_imgBox{width: 40%; display: inline-block;}
	.products_list_spanBox{width: calc(60% - 24px); display: inline-block; vertical-align: top; padding: 15px 5px; }
	.products_in_right{width: 100%; margin: 20px 0;}
	.products_in_img{width: 250px;}
}

@media screen and (max-width: 630px) {
	.img_02{width: 60%; margin: 20px 20%;} 
	.img_01{width: 130px; margin:20px calc((100% - 130px) / 2)}
	.link_more{width: calc(100% - 26px); margin: 5px 13px;}
	.editor ul li{width: 100%;}
	.history{width: 100%;}
	ul.tabs{
		height: 77px !IMPORTANT;
		border: none;
	}
}

@media screen and (max-width: 500px) {
	.products_box a{ width:calc(100% - 20px); margin:0 10px 20px;}
	.products_list_imgBox{width: 100%; display: inline-block;}
	.products_list_spanBox{width:calc(100% - 13px); display: inline-block; vertical-align: top; padding: 15px 5px; }
	.products_spanBox a, .products_in_page a{width: 100%; margin: 5px 0 0 0;}
	.products_in_img{display: block; margin: 0 auto}
	.contactus_case ul li ul li{width:100%;}
	#sitemap #product .sitemap-products a{ width: calc(100% - 20px); }
}

@media screen and (max-width: 400px) {
	#path{background-image: none;}
}

@media screen and (max-width: 340px) {
	.editor{padding: 0 5px; width: calc(100% - 10px);}
	.products_in_img{width: 200px;}
}

@media screen and (min-width: 999px) {
	.Left_bottom a.tel{
		pointer-events:none;
		margin-bottom: 10px;
	}
}






	ul, li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.abgne_tab {
		clear: left;
		width: 100%;
		margin: 10px 0;
	}
	ul.tabs {
		width: 100%;
		height: 37px;
	}
	.editor ul.tabs li {
		padding: 3px 0px;
		float: left;
		line-height: 31px;
		overflow: hidden;
		position: relative;
		margin-bottom: -1px;	/* 讓 li 往下移來遮住 ul 的部份 border-bottom */
		border-left: none;
		text-align: center;
		background: #ddd;
	}
	ul.tabs li:hover{
		font-weight: bold;
	}
	.editor ul.tabs li a {
		padding: 10px 30px;
		text-decoration: none;
	}

	ul.tabs li.active  {
		border: 1px solid #999;
		background: #fff;
		border-bottom: 1px solid #fff;
background: rgb(27,146,228);
background: -moz-linear-gradient(top,  rgba(27,146,228,1) 0%, rgba(23,140,219,1) 22%, rgba(9,113,184,1) 72%, rgba(1,102,170,1) 100%);
background: -webkit-linear-gradient(top,  rgba(27,146,228,1) 0%,rgba(23,140,219,1) 22%,rgba(9,113,184,1) 72%,rgba(1,102,170,1) 100%);
background: linear-gradient(to bottom,  rgba(27,146,228,1) 0%,rgba(23,140,219,1) 22%,rgba(9,113,184,1) 72%,rgba(1,102,170,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b92e4', endColorstr='#0166aa',GradientType=0 );
		
	}
	ul.tabs li.active a{
		cursor: default;
		color: #fff;
	}
	ul.tabs li.active:hover{
		font-weight: inherit;
	}
	div.tab_container {
		clear: left;
		width: 100%;
		border-top: none;
		background: #fff;
	}
	div.tab_container .tab_content {
		padding: 20px;
	}
	div.tab_container .tab_content h2 {
		margin: 0 0 20px;
	}